<template>
  <V-CommonHeaderLeft>
    <div class="sale">
      <Navigation :msg="navMsg"></Navigation>
      <div>
        <ReportCondition></ReportCondition>
        <div class="stock-table"
             :style="{height: tableHeight}">
          <div class="datum">
            <div v-for="(item,index) in 6"
                 :key="index"
                 class="item-div">
              <p class="title">订货单数</p>
              <p class="num">5</p>
            </div>
          </div>
          <div class="graph-box">
            <el-table style="width: 100%;"
                      class="table-class">
              <el-table-column type='index'
                               label="序号"
                               min-width="5%">
              </el-table-column>
              <el-table-column prop="0"
                               min-width="9.5%"
                               label="员工">
                <template slot-scope="scope">
                  <span :title="scope.row.size">{{ scope.row.size }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="belong"
                               min-width="9.5%"
                               label="关联客户">
                <template slot-scope="scope">
                  <span :title="scope.row.belong">{{ scope.row.belong }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="unit"
                               min-width="9.5%"
                               label="订货客户">
                <template slot-scope="scope">
                  <span :title="scope.row.unit">{{ scope.row.unit }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="systemStock"
                               min-width="9.5%"
                               label="订单数"
                               sortable>
                <template slot-scope="scope">
                  <span :title="scope.row.systemStock">{{ scope.row.systemStock }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="lastPrice"
                               min-width="9.5%"
                               label="订单金额"
                               sortable>
                <template slot-scope="scope">
                  <span :title="scope.row.lastPrice">{{ scope.row.lastPrice }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="securityStock"
                               min-width="9.5%"
                               label="待收款金额"
                               sortable>
                <template slot-scope="scope">
                  <span :title="scope.row.securityStock">{{ scope.row.securityStock }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="securityStock"
                               min-width="9.5%"
                               label="客单价"
                               sortable>
                <template slot-scope="scope">
                  <span :title="scope.row.securityStock">{{ scope.row.securityStock }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <Paging :msg="5"></Paging>
      </div>
    </div>
  </V-CommonHeaderLeft>
</template>
<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import Navigation from '@/components/common/navigation/Navigation'
import ReportCondition from '../reportCondition/ReportCondition'
import Paging from '@/components/common/paging/Paging'
export default {
  data () {
    return {
      tableHeight: '',
      navMsg: [
        {
          name: '报表',
          path: '/orderReport'
        },
        {
          name: '业绩统计',
          path: ''
        }
      ]
    }
  },
  components: {
    Paging,
    Navigation,
    ReportCondition,
    VCommonHeaderLeft
  },
  created () {
    this.getHight()
    window.addEventListener('resize', this.getHight)
  },
  destroyed () {
    window.removeEventListener('resize', this.getHight)
  },
  methods: {
    getHight () {
      this.tableHeight = window.innerHeight - 240 + 'px'
    }
  }
}
</script>
<style lang="scss" scoped>
.sale {
  width: 100%;
  margin-right: 10px;
  overflow: hidden;
  .stock-table {
    width: 100%;
    background-color: #fff;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: hidden;
    &:hover {
      overflow-y: overlay;
    }
    &::-webkit-scrollbar {
      width: 8px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.2);
    }
    &::-webkit-scrollbar-track {
      border-radius: 0;
      background-color: rgba(0, 0, 0, 0.1);
    }
    .datum {
      display: flex;
      padding: 10px 0;
      width: 100%;
      .item-div {
        flex: 1;
        padding: 24px 0;
        text-align: center;
        position: relative;
        .title {
          font-size: 12px;
          color: #666;
          margin-bottom: 8px;
          line-height: 1;
        }
        .num {
          font-size: 18px;
          font-weight: bold;
          color: #666;
          padding: 0 16px;
        }
        &::after {
          content: "";
          width: 1px;
          height: 50px;
          background-color: #e3e3e3;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
    }
  }
  @mixin el-common($el-color, $el-height, $el-class) {
    padding: 0;
    color: $el-color;
    height: $el-height;
    line-height: $el-height;
    text-align: center;
    #{$el-class} {
      width: 100%;
      line-height: 20px;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      word-break: break-all;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
  /deep/ .table-class {
    font-size: 12px;
    tr {
      td {
        @include el-common(
          $el-color: #333,
          $el-height: 40px,
          $el-class: "span"
        );
      }
      th {
        @include el-common(
          $el-color: #666,
          $el-height: 50px,
          $el-class: ".cell"
        );
        font-weight: normal;
        background-color: #fcfcfc;
      }
    }
  }
}
</style>
